import React, { Component } from 'react';
import {
  Colors,
  View,
  Text,
  PieChart
} from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

export default class PieChartScreen extends Component {

  componentDidMount() {
    // this.input.current?.focus();
  }
  renderDefaultExample() {
    return (
      <>
        <Text h3 marginB-s1>
          SegmentsExample
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} diameter={144} />
      </>
    );
  }
  renderDividerColorExample() {
    return (
      <>
        <Text h3 marginB-s1>
          DividerColorExample
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} diameter={144} dividerColor={Colors.black} />
      </>
    );
  }
  renderDividerWidthExample() {
    return (
      <>
        <Text h3 marginB-s1>
          DividerWidthExample
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} dividerWidth={10} dividerColor={Colors.black}/>
      </>
    );
  }
  renderDiameterExample() {
    return (
      <>
        <Text h3 marginB-s1>
          DiameterExample
        </Text>
        <PieChart segments={[{ percentage: 50, color: Colors.blue30 }, { percentage: 30, color: Colors.red30 }, { percentage: 20, color: Colors.green30 }]} diameter={72} dividerColor={Colors.black}/>
      </>
    );
  }
  render() {
    return (
      <TestSuite name="PieChart">
        <TestCase itShould=" Segments:blue:50,red:30,green:20">
          <View padding-20>{this.renderDefaultExample()}</View>
        </TestCase>
        <TestCase itShould="dividerColor:Colors.black">
          <View padding-20>{this.renderDividerColorExample()}</View>
        </TestCase>
        <TestCase itShould="dividerWidth:10">
          <View padding-20>{this.renderDividerWidthExample()}</View>
        </TestCase>
        <TestCase itShould="diameter:72">
          <View padding-20>{this.renderDiameterExample()}</View>
        </TestCase>
      </TestSuite>
    );
  }
}
